<template>
    <CanvasPanel :items="state.items"></CanvasPanel>
   
 </template>
 
 <script lang="ts" setup="" name="zutai1">
   import { ref,reactive } from "vue";
   import { ElMessageBox, ElMessage } from "element-plus";
   //import { auth } from '/@/utils/authFunction';
   //import { CanvasUtil } from '/@/utils/canvasUtil';
   import { getRouteBoards } from '/@/api/board/boardBase';
   import CanvasPanel from '/@/views/zutai/component/canvasPanel.vue';
  import { l } from "vite/dist/node/types.d-aGj9QkWt";
  import {  getDetailByNo } from '/@/api/board/boardDisplayDesign';
    const myCanvas = ref();
    const zt_No='ZT_001';
  const state=reactive({
     //ctx:any,
     items : ref<any>([]),
     switchs : ref<any>([]),
     routeList:ref<any>([]),
     test:0
  })
 const choseSwitchs=()=>{
  
  for(var i=0;i<state.items.length;i++){
       var item=state.items[i];
       console.log(item);
       if(item.itemType=='switch'){
        state.switchs.push(item);
       }
     }
 }
 const initData=async ()=>{
  state.routeList.push("544830880");
      let item2=(await getDetailByNo(zt_No)).data.result;
      if(item2!=null){
        var routs=item2.main.routeNos.split(',');
        state.routeList=[];
        for(let n=0;n<routs.length;n++){
          state.routeList.push(routs[n]);
        }
        state.items=item2.extDetail;
      }
      await RefreshState();
       //console.log(state.items);
   
       //choseSwitchs();
 }
 const   RefreshState= async()=>{
    let res=await getRouteBoards(state.routeList);
    let boardLists = res.data.result ?? [];
    for(var i=0;i<state.items.length;i++){
      var  item=state.items[i];
      try{
          if(item.itemType=='switch'){

            let stat=getState(item.id,boardLists);
            if(stat>=0) {item.state=stat;}
          }
      }catch{
        console.log(item)
      }
  }
}
  const getState=(id:any,items:any)=>{
    var rtn=-1;
    for(var i=0;i<items.length;i++){
      if(items[i].id==id){
        rtn=items[i].state;
        break;
      }
    }
    return rtn;

  }
 initData(); 
 setInterval( function(){
  RefreshState()
  },15000)
  
 </script>
 <style scoped>
 :deep(.el-ipnut),
 :deep(.el-select),
 :deep(.el-input-number) {
     width: 100%;
 }
 </style>